<template>
  <div class="myCell">
    <van-cell center>
      <template #icon>
        <i class="iconfont" v-html="icon"></i>
      </template>
      <template #title>
        <!-- 如果是图片用img标签渲染，非图片就是div渲染 -->
        <div class="title">{{ title }}</div>
      </template>
      <template #default>
        <img
          :src="baseUrl + value"
          alt=""
          v-if="type === 'img' && value"
          class="img"
        />
        <img
          src="@/assets/logo.png"
          alt=""
          v-else-if="type === 'img' && !value"
          class="img"
        />
        <div class="default" v-else>{{ value }}</div>
      </template>
      <template #right-icon>
        <i class="iconfont size14">&#xe653;</i>
      </template>
    </van-cell>
  </div>
</template>

<script>
export default {
  // 接收传参并渲染
  props: ['icon', 'title', 'value', 'type', 'right'],
  data () {
    return {
      baseUrl: process.env.VUE_APP_URL
    }
  }
}
</script>

<style lang="less" scoped>
.myCell {
  .iconfont {
    font-size: 20px;
  }
  .title {
    font-size: 14px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: left;
    color: #181a39;
    line-height: 12px;
    letter-spacing: 0px;
    padding-left: 10px;
  }
  .size14 {
    font-size: 12px;
  }
  .img {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.38);
    border-radius: 50%;
  }
}
</style>
